<template>
  <div id="home">
    <!-- 导航栏 -->
    <Navbar @identity-changed="handleIdentityChanged" />
    
    <!-- 身份快速切换 -->
    <IdentityQuickSwitch 
      v-if="userIdentity" 
      :current-identity="userIdentity" 
      :show="showQuickSwitch"
      @identity-changed="handleIdentityChanged"
      @close="showQuickSwitch = false"
    />
    
    <!-- 身份选择器 -->
    <IdentitySelector v-if="!userIdentity" @identity-selected="handleIdentitySelected" />
    
    <!-- 首页英雄区域 -->
    <Hero v-if="userIdentity" />
    
    <!-- 根据用户身份显示不同内容 -->
    <div v-if="userIdentity">
      <!-- 关于我们 -->
      <About />
      
      <!-- 信任指标 -->
      <TrustIndicators />
      
      <!-- 用户反馈 -->
      <SocialProof />
      
      <!-- 常见问题 -->
      <FAQ />
      
      <!-- 投资者内容 -->
      <InvestorContent v-if="userIdentity === 'investor'" />
      
      <!-- 企业方内容 -->
      <EnterpriseContent v-if="userIdentity === 'enterprise'" />
      
      <!-- 大学生内容 -->
      <StudentContent v-if="userIdentity === 'student'" />
      
      <!-- 通用内容 - 所有身份都需要看到 -->
      <div class="common-sections">
        <!-- 分隔线 -->
        <div class="section-divider">
          <div class="divider-line"></div>
          <div class="divider-text">
            <i class="fas fa-star"></i>
            <span>核心信息</span>
            <i class="fas fa-star"></i>
          </div>
          <div class="divider-line"></div>
        </div>
        
        <!-- 产品服务 -->
        <Products />
        
        <!-- 解决方案 -->
        <Solutions ref="solutions" />
        
        <!-- 校企合作 -->
        <Cooperation />
        
        <!-- 团队介绍 -->
        <Team />
        
        <!-- 联系我们 -->
        <Contact />
      </div>
    </div>
    
    <!-- 页脚 -->
    <Footer @activate-industry="handleIndustryActivation" />
    
    <!-- 浮动身份切换按钮 -->
    <div class="floating-switch-btn" v-if="userIdentity" @click="showQuickSwitch = true">
      <i class="fas fa-exchange-alt"></i>
      <span>切换身份</span>
    </div>
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import IdentitySelector from '../components/IdentitySelector.vue'
import Hero from '../components/Hero.vue'
import About from '../components/About.vue'
import Team from '../components/Team.vue'
import Products from '../components/Products.vue'
import Solutions from '../components/Solutions.vue'
import Cooperation from '../components/Cooperation.vue'
import Contact from '../components/Contact.vue'
import Footer from '../components/Footer.vue'
import InvestorContent from '../components/InvestorContent.vue'
import EnterpriseContent from '../components/EnterpriseContent.vue'
import StudentContent from '../components/StudentContent.vue'
import IdentityQuickSwitch from '../components/IdentityQuickSwitch.vue'
import TrustIndicators from '../components/TrustIndicators.vue'
import SocialProof from '../components/SocialProof.vue'
import FAQ from '../components/FAQ.vue'

export default {
  name: 'HomePage',
  components: {
    Navbar,
    IdentitySelector,
    Hero,
    About,
    Team,
    Products,
    Solutions,
    Cooperation,
    Contact,
    Footer,
    InvestorContent,
    EnterpriseContent,
    StudentContent,
    IdentityQuickSwitch,
    TrustIndicators,
    SocialProof,
    FAQ
  },
  data() {
    return {
      userIdentity: null,
      showQuickSwitch: false
    }
  },
  mounted() {
    // 检查localStorage中是否有用户身份
    const savedIdentity = localStorage.getItem('userIdentity')
    if (savedIdentity) {
      this.userIdentity = savedIdentity
    }
  },
  methods: {
    handleIdentitySelected(identity) {
      this.userIdentity = identity
      localStorage.setItem('userIdentity', identity)
      
      // 根据身份显示不同的内容
      this.showIdentitySpecificContent(identity)
    },
    
    showIdentitySpecificContent(identity) {
      // 这里可以根据不同身份显示不同的内容
      // 目前先显示通用内容，后续可以扩展
      console.log('用户身份:', identity)
    },
    
    handleIdentityChanged(newIdentity) {
      // 处理导航栏身份切换
      this.userIdentity = newIdentity
      localStorage.setItem('userIdentity', newIdentity)
      
      // 滚动到顶部
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    handleIndustryActivation(industryId) {
      // 将行业激活事件传递给Solutions组件
      if (this.$refs.solutions) {
        this.$refs.solutions.activateIndustry(industryId)
      }
    }
  }
}
</script>

<style>
@import '../assets/styles/global.css';

/* 通用内容部分样式 */
.common-sections {
  position: relative;
  z-index: 1;
}

/* 分隔线样式 */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4rem 0;
  padding: 0 2rem;
}

.divider-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

.divider-text {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 2rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 25px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.divider-text i {
  color: #3b82f6;
  font-size: 0.9rem;
}

.divider-text span {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .section-divider {
    margin: 3rem 0;
    padding: 0 1rem;
  }
  
  .divider-text {
    padding: 0 1.5rem;
    font-size: 0.9rem;
    gap: 0.5rem;
  }
  
  .divider-text i {
    font-size: 0.8rem;
  }
}

/* 浮动身份切换按钮 */
.floating-switch-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-switch-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #2563eb, #0891b2);
}

.floating-switch-btn i {
  font-size: 1rem;
}

.floating-switch-btn span {
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-switch-btn {
    bottom: 20px;
    right: 20px;
    padding: 0.8rem 1.2rem;
    font-size: 0.8rem;
  }
  
  .floating-switch-btn span {
    display: none;
  }
  
  .floating-switch-btn i {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .floating-switch-btn {
    bottom: 15px;
    right: 15px;
    padding: 0.7rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    justify-content: center;
  }
}
</style>
